<template>
  <div class="nav-swiper">
    <div class="nav-swiper-main">

      <div class="swiper-t">
        <ul @mouseleave="mouseOut">
          <li 
            v-for="(item) in cateGoryList" 
            :key="item.category_id"
            @mouseenter="mouseHover(item.category_id)"
            :class="item.category_id === currentIndex?'active':''"
            @click="showItem(item)"
          >
            <span>{{ item.category_name }}</span>
            <span><el-icon><ArrowRight /></el-icon></span>
          </li>

          <div class="active-r" v-if="isShow">

            <div class="active-r-t">
              <!-- 新增内容 -->
              <el-card 
                :body-style="{ padding: '0px' }"
                v-for="item in topList"
                :key="item.book_id"
              >
                <img
                :src="item.photo"
                  alt=""
                  class="image"
                />
                <div style="padding: 14px">
                  <span>
                    {{ item.book_name }}
                  </span>
                  <div class="bottom">
                    <time class="time">{{ item.publisher }}</time>
                  </div>
                </div>
              </el-card>
            </div>

            <div class="active-r-b">
              <!-- 新增内容 -->
              <div  
                v-for="item in bottomList"
                :key="item.book_id"
              >
                <img
                  :src="item.photo" 
                  alt=""
                  class="bottomListImg"
                >
                <div>
                  {{ item.book_name }}
                </div>
              </div>
              
            </div>

          </div>
        </ul>
        
        <div class="carousel">
          <el-carousel 
              :interval="3000" 
              arrow="always"
              autoplay
          >
            <el-carousel-item 
              v-for="item in swiperImgList" 
              :key="item.id"
            >
              <img class="img-carousel" :src="item.src">
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <ul class="swiper-b">

        <el-skeleton 
            style="--el-skeleton-circle-size: 70px" 
            :loading="loading" 
            animated
          >
            <template #template>
              <ul class="skeleton-template">
                <li v-for="(i,k) in 5" :key="k">
                  <el-skeleton-item variant= "circle" />
                  <div>
                    <el-skeleton-item variant="h4" style="width: 80px" />
                    <el-skeleton-item variant="h4" style="width: 100%" />
                  </div>
                </li>
              </ul>
            </template>
            <template #default>
              <li v-for="i in swiperBottomList" :key="i.book_id">
                <span>
                  <img class="bottom-img" :src="i.photo">
                </span>
                <div>
                  <h5>{{ i.book_name }}</h5>
                  <span>{{ i.publisher }}</span>
                </div>
              </li>
            </template>
        </el-skeleton>

      </ul>

    </div>
  </div>
</template>

<script setup>
// element
import { ArrowRight } from '@element-plus/icons-vue'
import { computed, onBeforeMount, reactive, watchEffect } from 'vue';
import { useStore } from 'vuex';

// api
import bookModelApi from '@/request/api/book.js';

// utils
import { getRandomItems } from '@/utils/arrayUtil.js'

// store
const store = useStore();

//控制li的显示class
let currentIndex = ref(0);
// 右侧数据切换
let isShow = ref(false);

// bottomList
let swiperBottomList = ref([]);

// 计算属性显示骨架屏
let loading = computed(() => {
  return swiperBottomList.value.length == 0;
})

// 鼠标移入显出
const whitePageList = reactive([]);
// 取出6条
let sixList = ref([]);
// topList
let topList = ref([]);
// bottomList
let bottomList = ref([]);

// 鼠标移入
const mouseHover = async (id) => {
  currentIndex.value = id;
  isShow.value = true;

  // 请求同分类
  bookModelApi.getAllBookByCategoryIdApi({
    category_id: id
  }).then(res => {
    whitePageList.push(...res.data);
    sixList.value = getRandomItems(whitePageList, 6);
    topList.value = sixList.value.slice(0,2);
    bottomList.value = sixList.value.slice(2);
  })
}

//鼠标移出
const mouseOut = ()=>{
	currentIndex.value = '';
  isShow.value = false;
}

// 分类列表
let cateGoryList = ref([]);

// 监听store中swiperBottomList的变化 及时赋值
watch(() => store.state.book.swiperBottomList,(newVal) => {
  swiperBottomList.value = newVal;
}
);


// 初始化轮播图区域
watchEffect(async () => {
  // 获取所有分类存入vuex
  const res = await bookModelApi.getAllCategoryApi();
  store.commit("setCateGoryList",res.data);
  // 分类列表
  if(store.state.book.cateGoryList){
    cateGoryList.value = store.state.book.cateGoryList;
  }
 
})


// 轮播图图片
const swiperImgList = [
  {
    id: 1,
    src: 'src/assets/swiper/s1.jpg'
  },
  {
    id: 2,
    src: 'src/assets/swiper/s2.png'
  },
  {
    id: 3,
    src: 'src/assets/swiper/s3.png'
  },
  {
    id: 4,
    src: 'src/assets/swiper/s4.png'
  },
  {
    id: 5,
    src: 'src/assets/swiper/s5.png'
  }
]


const showItem = item => {
  console.log('item', item)
}

</script>

<style lang='less' scoped>
.nav-swiper{
  background: url('@/assets/transitionbg.png');
  width: 100%;
  height: 900px;
  .nav-swiper-main{
    width: 1000px;
    padding:47px 0;
    margin: 0 auto;
  }
}

.swiper-t{
  display: flex;
  height: 550px;
  border-radius: 11px 11px 0px 0px;
  border: 1px solid rgb(157, 202, 157);
}
.swiper-t>ul{
  width: 160px;
  height: 100%;
  background: #2b283d;
  justify-content: space-around;
  border-radius:11px 0px 0px 0px;
  /* overflow: hidden; */
  display: flex;
  flex-direction: column;
  position: relative;
}
.swiper-t>ul>li{
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 160px;
  height: 37px;
  font-size: 16px;
  color:#f2f2f2;
  cursor: pointer;
}
.active{
  background: linear-gradient(90deg, #3FE5FF 0%, rgba(62, 222, 255, 0.93) 2%, rgba(60, 203, 255, 0.73) 9%, rgba(58, 186, 255, 0.56) 17%, rgba(57, 172, 255, 0.41) 25%, rgba(55, 160, 255, 0.28) 33%, rgba(54, 150, 255, 0.18) 43%, rgba(53, 142, 255, 0.1) 53%, rgba(53, 137, 255, 0.04) 64%, rgba(53, 133, 255, 0.01) 77%, rgba(53, 133, 255, 0) 100%);
}

.swiper-t .carousel{
  height: 550px;
  width: 840px;
}
::v-deep .el-carousel{
  height: 550px;
}
.el-carousel img{
  width: 100%;
  height: 550px;
  // object-fit: cover;
}
::v-deep .el-carousel__container{
  height: 550px;
}
.swiper-b{
  display: flex;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.swiper-b li{
  width: 213px;
  height: 133px;
  background: #fff;
  border-radius:0 0 0 11px;
  display: flex;
  align-items:center;
  justify-content: center;
  cursor: pointer;
}
.swiper-b li img{
  width: 64px;
  height: 64px;
}
.swiper-b li div{
  margin-left: 11px;
}
.swiper-b li div h4{
  font-size: 16px;
  color:#333;
}
.swiper-b li div span{
  font-size: 12px;
  color:#333;
}
.active-r{
  width: 724px;
  height: 550px;
  opacity: 1;
  border-radius: 11px 11px 0 0;
  background: #fff;
  position: absolute;
  top:0;
  left:160px;
  z-index:999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.active-r-t{
  padding:23px 30px;
  display: flex;
  justify-content: space-around;
}
.active-r-t .el-card{
  width: 40%;
  height: 320px;
  .image{
    width: 100%;
    height: 250px;
  }
}
.active-r-b{
  width: 724px;
  height: 217px;
  background: #f3f5f6;
  display: flex;
  justify-content: space-around;
  .bottomListImg{
    width: 100px;
    height: 150px;
  }
}
.bottom-img{
  border-radius: 50%;
}

.img-carousel{
  width: 100%;
  height: 100%;
  // object-fit: cover;
}

.skeleton-template{
  display: flex;
}

</style>